<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .box {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto 0;
        }

        .u1 {
            width: 3500px;
            height: 300px;
            position: relative;
            left: 0;
        }

        .u1 li {
            width: 500px;
            height: 300px;
            float: left;
            text-align: center;
            color: #fff;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="u1">
            <li style="background: #000;">1</li>
            <li style="background: #222;">2</li>
            <li style="background: #444;">3</li>
            <li style="background: #666;">4</li>
            <li style="background: #888;">5</li>
            <li style="background: #aaa;">6</li>
        </ul>
    </div>



    <script src="../js/1.js">


    </script>

    <script>
        let u1 = document.querySelector(".u1");

        let ii = 0;
        auto()


        let yidong = (yuan, arr) => {

            // console.log(ii)
            // yuan.style[arr]=
            // console.log(arr, [arr])

            for (let a in arr) {
                // console.log(a, arr[a])    left  -0
                clearInterval(yuan[a])
                // console.log(arr[a])
                // let chu = yuan.style[a];
                // console.log(chu)
                // let speed = chu;
                let speed = 0
                yuan[a] = setInterval(() => {
                    // console.log(arr[a])

                    speed = speed - 20;
                    // console.log(speed)
                    yuan.style[a] = speed + "px"
                    console.log(yuan.style[a])
                    if (yuan.style[a] == arr[a] + "px") {
                        console.log("asd")
                        clearInterval(yuan[a])
                    }
                    // console.log(yuan.style[a])
                }, 30)
            }
        }



        function auto() {
            setInterval(() => {
                ii++
                // console.log(ii)
                yidong(u1, { left: (ii * (-500)) })
            }, 1700)
        }

    </script>
</body>

</html>